<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import bgImage from '@/assets/image/bg-image.jpg'
import IconamoonArrowDown2Thin from '~icons/iconamoon/arrow-down-2-thin';
import { debounce } from '@/utils/tools.js'
import { articleStore } from '@/store'
import { storeToRefs } from 'pinia';

import FaRegularListAlt from "~icons/fa-regular/list-alt";
import FaRegularBookmark from "~icons/fa-regular/bookmark";
import Fa6RegularThumbsUp from "~icons/fa6-regular/thumbs-up";
import Fa6RegularEye from "~icons/fa6-regular/eye";
import Fa6RegularCalendarDays from "~icons/fa6-regular/calendar-days";
import Fa6RegularClock from "~icons/fa6-regular/clock"; 

const { getArticle } =storeToRefs(articleStore()); 


const route = useRoute();
const showScrollBottom=ref(true)
const scrollToBottom = () => {
    const homeElement = document.querySelector('#home');
    if(homeElement){
        document.body.scrollTo({
            top: homeElement.clientHeight,
            behavior: 'smooth'

        })
    }

}
/**
 * 监听滚动事件以控制底部滚动按钮的显示
 * 当页面滚动距离超过100时，隐藏底部滚动按钮；否则，显示底部滚动按钮
 */
const srcollListEvent=()=>{
    if(document.body.scrollTop > 100){
            showScrollBottom.value=false
    }else{
            showScrollBottom.value=true
     }
}
const initScrollEvent = () => {
    document.body.addEventListener('scroll', debounce(srcollListEvent, 100))
}
onMounted(() => { 
    initScrollEvent()

})
</script>

<template>

<div class="page-header">
    <div id="home" v-if="route.path =='/home'" class="home">
        <el-image :src="bgImage" class="banner" fit="cover"></el-image>
        <div class="content">
            <div class="title">Amour Blog</div>
            <div class="saying">活到老，学到老,天天开心</div>
        </div>
        <div class="mask"> </div>
        <div v-if="showScrollBottom" class="scroll-bottom ">
            <IconamoonArrowDown2Thin  @click="scrollToBottom" class="w-[1.5rem] h-[1.5rem] text-white animate-bounce"/>
        </div>
    </div>
    
    <div v-else-if="route.path =='/detail'" class="detail">
        <el-image :src="bgImage" class="banner" fit="cover"></el-image>
         <div class="content text-white ">
            <div class="title">{{getArticle.title}}</div>
             <div class='info text-md mb-5 flex flex-wrap items-center max-w-[60vw]'>
                    <div class="mr-[0.3rem] flex items-center">
                <Fa6RegularCalendarDays class="w-[1rem] h-[1rem] mr-[0.2rem]" />
                <span class='ml-2'>发表于 {{getArticle.createTime}}</span>
                    | 
                </div>
                    <div class="mr-[0.3rem]  flex items-center">
                <Fa6RegularClock class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                <span class='ml-2'>更新于 {{getArticle.updateTime}}</span>
                    | 
                </div>
                <div class="mr-[0.3rem]  flex items-center">
                <FaRegularListAlt class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                <span class='ml-2'>{{getArticle.category}}</span>
                    | 
                </div>
                <div class="mr-[0.3rem]  flex items-center">
                <FaRegularBookmark class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                <span class='ml-2'>{{getArticle.tags.join('、')}}</span>
                    | 
                </div>
                    <div class="mr-[0.3rem]  flex items-center">
                <Fa6RegularThumbsUp class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                <span class='ml-2'>浏览次数 {{getArticle.views}} </span>
                    | 
                </div>
                    <div class="mr-[0.3rem]  flex items-center">
                <Fa6RegularEye class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                <span class='ml-2'>点赞次数 {{getArticle.likes}} </span>
                   | 
                </div>
                 <div class="mr-[0.3rem]  flex items-center">
                <Fa6RegularEye class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                <span class='ml-0.3rem'> 阅读时长 {{getArticle.readDuration}} </span>
                </div>
                </div>

         </div>
        <div class="mask"> </div>
    </div>
    <div v-else class="other">
        <el-image :src="bgImage" class="banner" fit="cover"></el-image>
        <div class="content">
            <div class="title">{{route.name}}</div>
        </div>
        <div class="mask"> </div>
    </div>

</div>

</template>

<style lang="scss" scoped>  

.page-header{
    width: 100%;
    .home{
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        .scroll-bottom{
            cursor: pointer;
            position:absolute;
            left: 50%;
            bottom: 5px;
            transform: translateX(-50%);
            z-index: 2;
        }
    }
    .detail{
        position: relative;
        width: 100%;
        height: 20rem;
        overflow: hidden;
    }
    .other{
        position: relative;
        width: 100%;
        height: 20rem;
        overflow: hidden;
    }
    .content{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        max-width: 60%;
        z-index: 2;
        .title{
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }
        .saying{
            font-size: 1.2rem;
            color: #fff;
            text-align: center;
        }
    }
}
.banner{
    width: 100%;
    height: 100%;
}
.mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}

</style>